<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>

        #title {
            color: #FF6600;
            font-size: 1rem;
            font-weight: bold;
            display: block;
            margin-bottom: 20px;
            white-space: nowrap;
            overflow: hidden;
            border-right: 4px solid #000;
            animation: typing 2s steps(30, end) infinite; /* 假设标题有30个字符 */
        }

        @keyframes typing {
            from {
                width: 0;
            }
            to {
                width: 100%;
            }
        }

        .slideshow-container {
            position: relative;
            width: 100%; /* 或你想要的宽度 */
            height: 300px; /* 或你想要的高度 */
            overflow: hidden;
        }

        .slideshow {
            display: flex;
            animation: slideshow 10s infinite; /* 假设每张图片显示3.33秒 */
        }

        .banner {
            flex-shrink: 0;
            width: 100%;
            height: auto;
            animation: slide 10s infinite;
        }

        @keyframes slideshow {
            0% {
                transform: translateX(0);
            }
            33.33% {
                transform: translateX(-100%);
            }
            66.66% {
                transform: translateX(-200%);
            }
            100% {
                transform: translateX(0);
            }
        }

        @keyframes slide {
            0% {
                opacity: 1;
            }
            33.33% {
                opacity: 1;
            }
            66.66% {
                opacity: 1;
            }
            100% {
                opacity: 1;
            }
        }

        /* 为第一张图片设置初始状态 */
        .slideshow .banner:first-child {
            animation-delay: -10s;
        }

        /* 为第二张图片设置延迟 */
        .slideshow .banner:nth-child(2) {
            animation-delay: -6.66s;
        }

        /* 为第三张图片设置延迟 */
        .slideshow .banner:nth-child(3) {
            animation-delay: -3.33s;
        }

    </style>

</head>

<body>
<table width="496">

    <form method="POST" action="#" name="my_form" id="my_form">
        <tr bgcolor="#FFFFFF">
            <p><span id="title">南京信息职业技术学院2024志愿者招募</span>&nbsp;&nbsp;&nbsp;注册登记</p>
            <br>
            <div id="img" class="slideshow-container">
                <div class="slideshow">
                    <img src="img/banner1.jpg" alt="banner1" class="banner">
                    <img src="img/banner2.jpg" alt="banner2" class="banner">
                    <img src="img/banner3.jpg" alt="banner3" class="banner">
                </div>
            </div>
        </tr>
        <tr>
            <td height="143" colspan="3"><img src="img/banner1.jpg" width="698" height="500"></td>
        </tr>
        <tr>
            <td height="61" colspan="3" align="center" bgcolor="#CCCCCC">此处自行增加活动的文字介绍</td>
        </tr>
        <tr>
            <td width="305" align="right"> 姓&nbsp; &nbsp; &nbsp; 名：</td>
            <td colspan="2" align="left"><input type="text" name="uname" id="uname"></td>
        </tr>
        <tr>
            <td align="right">性 &nbsp; &nbsp; &nbsp;别：</td>
            <td colspan="2" align="left" bgcolor="#FFFFFF"><input type="radio" name="gender" value="男">
                男 <input type="radio" name="gender" value="女">女
            </td>
        </tr>
        <tr>
            <td align="right">年 &nbsp; &nbsp; &nbsp;龄：</td>
            <td colspan="2" align="left"><input type="text" name="age" id="age"></td>
        </tr>

        <tr>
            <td align="right">密&nbsp; &nbsp; &nbsp; 码：</td>
            <td colspan="2" align="left"><input type="text" name="password" id="password"></td>
        </tr>
        <tr>
            <td align="right">确认密码：</td>
            <td colspan="2" align="left"><input type="text" name="password2" id="password2"></td>
        </tr>
        <tr>
            <td align="right">手机号码：</td>
            <td colspan="2" align="left">
                <input type="text" name="phone" id="phone">
            </td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td width="40" align="center"><input type="submit" name="submit" id="subutton" value="注   册"></td>
            <td width="305"><input type="reset" name="rebutton" id="rebutton" value="重    置"></td>
        </tr>
        <tr bgcolor="#CCCCCC">
            <td height="47" colspan="3" align="center" font size="5px"> 此处需要显示班级、姓名、学号等信息</td>
        </tr>

    </form>
</table>
</body>
<script>
    function validForm() {
        if (!validNotEmpty("uname")) {
            return false;
        }
        if (!validAge()) {
            return false;
        }
        if (!validNotEmpty("password")) {
            return false;
        } else if (!validPassword(document.getElementById("password").value)) {
            alert("密码必须包含至少6个字符，至多18个字符，至少1个大写字母，1个小写字母，1个数字和1个特殊字符");
            return false;
        }
        if (!comparePasswords(document.getElementById("password").value, document.getElementById("password2").value)) {
            alert("两次输入的密码不一致");
            return false;
        }
        if (!validNotEmpty("phone")) {
            return false;
        }
        if (!validGender()) {
            return false;
        }
        return true;
    }


    function validGender() {
        const radios = document.getElementsByName('gender');
        let formValid = false;

        for (let i = 0; i < radios.length; i++) {
            if (radios[i].checked) {
                formValid = true;
                break;
            }
        }

        if (!formValid) {
            alert('请选择性别');
            return false;
        }

    }

    // 校验年龄在18-25岁之间
    function validAge() {
        const age = document.getElementById("age").value;
        if (age < 18 || age > 25) {
            alert("年龄必须在18-25岁之间");
            return false;
        }

    }

    function validNotEmpty(inputName) {
        const input = document.getElementById(inputName);
        if (input.value.trim() === '') {
            alert('请输入' + inputName);
            input.focus();
            return false;
        }
        return true;
    }

    function validPassword(inputPassword) {
        const passwordPattern = /^\w{6,18}$/;
        return passwordPattern.test(inputPassword);
    }

    function comparePasswords(password1, password2) {
        return password1 === password2;
    }


</script>
</html>